<template>
  <div :style="maskContainer">
    <div class="imgName">
      <span class="left">{{imgIndex}} / {{imgLength}}</span>
      <!-- 关闭按钮 -->
      <span class="closeBtn" @click="closeViewer">
          <i class="iconfont icon-guanbi"></i>
        </span>
      <h4 class="center">{{bigImgName.slice(0,bigImgName.indexOf('.'))}}</h4>
    </div>
    <!-- 图片容器 -->
    <div class="imgContainer" ref="imgContainer" :style="imgContainer">
      <img :src="bigImgUrl" ref="bigImg" :style="bigImg" alt="" @load="init">
    </div>
    <div class="fixedHandle">
      <!-- 操作按钮 -->
      <div class="handleContainer cancelselect" onselectstart="return false">
        <ul>
          <li @click="handlePrev">
            <i class="iconfont icon-tupianfanyezuo" :class="isDisPreBtn ? 'show-btn' : ''"></i>
          </li>
          <li @click="handleNext">
            <i class="iconfont icon-tupianfanyeyou" :class="isDisNextBtn ? 'show-btn' : ''"></i>
          </li>
          <li @click="enlarge">
            <i class="iconfont icon-fangda"></i>
          </li>
          <li @click="reduce">
            <i class="iconfont icon-suoxiao"></i>
          </li>
          <li @click="rotate">
            <i class="iconfont icon-xuanzhuan"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'vue-picture-viewer',
    props: {
      // 当前点击的图片对象
      imgObj: {
        type: Object,
        default: {}
      },
      // 图片放大的背景
      background: {
        type: String,
        default: 'rgba(0,0,0,0.6)'
      }
    },
    data () {
      return {
        // 上一张是否可点击
        isDisPreBtn: false,
        // 下一张是否可点击
        isDisNextBtn: false,
        // 预览的数组集
        imgData: [],
        // 大图的url
        bigImgUrl: '',
        // 当前查看的图片的索引
        i: 0,
        // 旋转num数 0不旋转， 1顺时针旋转90度，2顺时针旋转180度，3顺时针旋转270度，4顺时针旋转360度
        rotateDeg: 0,
        // 当前查看的图片的名称
        bigImgName: '',
        // 图片所要预览的总长度
        imgLength: 0,
        // 当前查看的是第几张图
        imgIndex: 1,
        // 大图的宽度
        bigImgConWidth: '',
        // 大图的高度
        bigImgConHeight: '',
        // 最初的图片宽度
        imgW: 0,
        // 最初的图片高度
        imgH: 0,
        // 最初的图片偏移宽度
        imgOffW: 0,
        // 最初的图片偏移高度
        imgOffH: 0,
        // 当前组件的最外层的样式
        maskContainer: {
          width: '100%',
          height: '100%',
          background: this.background,
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        // 最大图容器的样式
        imgContainer: {
          width: 'auto',
          height: 'auto',
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)'
        },
        // 最大图的样式
        bigImg: {
          display: 'block',
          width: 'auto',
          height: 'auto',
          position: 'absolute',
          top: 50 + '%',
          left: 50 + '%',
          marginLeft: '',
          marginTop: '',
          userSelect: 'none'
        }
      }
    },
    watch: {
      imgObj () {
        this.fetchData()
      }
    },
    mounted () {
      this.fetchData(true)
      window.onresize = () => {
        return (() => {
          if (this.$store.state.bigImg.imgShow) {
            this.init()
          }
        })()
      }
    },
    methods: {
      // 初始化当前点击的图片的信息
      fetchData () {
        let _index = this.imgObj.index // 当前点击的图片的索引，通过该索引获取到该图片的url和名称
        this.imgData = this.imgObj.list // 当前所有需要预览的数组集
        this.bigImgUrl = this.imgData[_index].url // 通过当前点击的索引获取到url
        this.bigImgName = this.imgData[_index].name // 通过当前的索引获取到name
        this.imgLength = this.imgData.length // 获取数组集的总长度
        this.i = _index // 当前图片的索引
        this.imgIndex = _index + 1 // 当前第几张图片
        this.init()
      },
      // 初始化大图的宽度，高度，距离所有的距离
      init (flag) {
        // 获取浏览器高度和宽度值
        let screenW = document.documentElement.offsetWidth || document.body.offsetWidth
        let screenH = document.documentElement.scrollHeight || document.body.scrollHeight
        this.$nextTick(function () {
          const ratio = [0.1, 0.2, 0.3, 0.4, 0.5, 0.7, 0.8, 0.9]
          for (let item of ratio) {
            console.log(this.$refs.bigImg.naturalWidth)
            // this.$refs.bigImg.naturalWidth直接获取图片的原始宽高
            if (this.$refs.bigImg.naturalWidth * item < screenW && this.$refs.bigImg.naturalHeight * item < screenH - 50) {
              this.bigImgConWidth = this.$refs.bigImg.naturalWidth * item
              this.bigImgConHeight = this.$refs.bigImg.naturalHeight * item
              this.imgContainer.width = this.bigImgConWidth + 'px'
              this.imgContainer.height = this.bigImgConHeight + 'px'
              if (flag) {
                this.imgW = this.bigImgConWidth + 'px'
                this.imgH = this.bigImgConHeight + 'px'
                this.imgOffW = -(this.bigImgConWidth / 2) + 'px'
                this.imgOffH = -(this.bigImgConHeight / 2) + 'px'
              }
              this.bigImg.width = this.bigImgConWidth + 'px'
              this.bigImg.height = this.bigImgConHeight + 'px'
              this.compareWidAndHei(this.bigImgConHeight, this.bigImgConWidth)
//              this.bigImg.marginLeft = -(this.bigImgConWidth / 2) + 'px'
//              this.bigImg.marginTop = -(this.bigImgConHeight / 2) + 'px'
            }
          }
          if (this.i === (this.imgLength - 1)) {
            this.isDisNextBtn = true
          } else {
            this.isDisNextBtn = false
          }
          if (this.i === 0) {
            this.isDisPreBtn = true
          } else {
            this.isDisPreBtn = false
          }
        })
      },
      // 图片的top和left 与window的宽高进行比较 如果this.bigImgConHeight的一半大于window的 那么取window的高度
      compareWidAndHei (_height, _width) {
        let windowH = document.body.clientHeight / 2
        let windowW = document.body.clientWidth / 2
        if (windowH < (_height / 2)) {
          this.bigImg.marginTop = '-' + windowH + 'px'
        } else {
          this.bigImg.marginTop = -(_height / 2) + 'px'
        }
        if (windowW < (_width / 2)) {
          this.bigImg.marginLeft = '-' + windowW + 'px'
        } else {
          this.bigImg.marginLeft = -(_width / 2) + 'px'
        }
      },
      // 旋转对大图的宽度，高度，距离所有的距离处理
      rotateInit () {
//        let screenW = document.documentElement.offsetWidth || document.body.offsetWidth
        let screenH = document.documentElement.scrollHeight || document.body.scrollHeight
        const ratio = [0.1, 0.2, 0.3, 0.4, 0.5, 0.7, 0.8, 0.9]
        for (let item of ratio) {
          if (this.$refs.bigImg.naturalWidth * item < screenH - 160) {
            this.bigImgConWidth = this.$refs.bigImg.naturalWidth * item
            this.bigImgConHeight = this.$refs.bigImg.naturalHeight * item
            this.imgContainer.width = this.bigImgConWidth + 'px'
            this.imgContainer.height = this.bigImgConHeight + 'px'
            this.bigImg.width = this.bigImgConWidth + 'px'
            this.bigImg.height = this.bigImgConHeight + 'px'
            this.compareWidAndHei(this.bigImgConHeight, this.bigImgConWidth)
//            this.bigImg.marginLeft = -(this.bigImgConWidth / 2) + 'px'
//            this.bigImg.marginTop = -(this.bigImgConHeight / 2) + 'px'
          }
        }
      },
      // 放大 图片以1.3倍的形式放大
      enlarge () {
        this.$nextTick(function () {
          this.$refs.bigImg.style.width = (this.$refs.bigImg.offsetWidth) * 1.3 + 'px'
          this.$refs.bigImg.style.height = (this.$refs.bigImg.offsetHeight) * 1.3 + 'px'
          this.$refs.bigImg.style.left = '50%'
          this.$refs.bigImg.style.top = '50%'
          this.compareWidAndHei(this.$refs.bigImg.offsetHeight, this.$refs.bigImg.offsetWidth)
//          this.bigImg.marginLeft = -(this.$refs.bigImg.offsetWidth) / 2 + 'px'
//          this.bigImg.marginTop = -(this.$refs.bigImg.offsetHeight) / 2 + 'px'
        })
      },
      // 缩小 图片以0.7倍的形式缩小
      reduce () {
        this.$refs.bigImg.style.width = this.$refs.bigImg.offsetWidth * 0.7 + 'px'
        this.$refs.bigImg.style.height = this.$refs.bigImg.offsetHeight * 0.7 + 'px'
        this.$refs.bigImg.style.left = '50%'
        this.$refs.bigImg.style.top = '50%'
        this.compareWidAndHei(this.$refs.bigImg.offsetHeight, this.$refs.bigImg.offsetWidth)
//        this.bigImg.marginLeft = -(this.$refs.bigImg.offsetWidth) / 2 + 'px'
//        this.bigImg.marginTop = -(this.$refs.bigImg.offsetHeight) / 2 + 'px'
      },
      // 旋转的时候回复到最初的图片状态
      normal () {
        this.$refs.bigImg.style.width = this.imgW
        this.$refs.bigImg.style.height = this.imgH
        this.$refs.bigImg.style.left = '50%'
        this.$refs.bigImg.style.top = '50%'
        this.bigImg.marginLeft = this.imgOffW
        this.bigImg.marginTop = this.imgOffH
      },
      // 旋转
      rotate () {
        if (this.rotateDeg === 0) {
          this.$refs.bigImg.style.transform = 'rotate(90deg)'
          this.normal()
          this.rotateInit()
          this.rotateDeg++
        } else if (this.rotateDeg === 1) {
          this.$refs.bigImg.style.transform = 'rotate(180deg)'
          this.normal()
          this.init()
          this.rotateDeg++
        } else if (this.rotateDeg === 2) {
          this.$refs.bigImg.style.transform = 'rotate(270deg)'
          this.normal()
          this.rotateInit()
          this.rotateDeg++
        } else if (this.rotateDeg === 3) {
          this.$refs.bigImg.style.transform = 'rotate(360deg)'
          this.normal()
          this.init()
          this.rotateDeg = 0
        }
      },
      // 切换到上一张
      handlePrev () {
        let _this = this
        this.i--
        if (this.i === -1) {
          this.isDisPreBtn = true
          this.i = 0
        } else {
          this.$refs.bigImg.style.transform = 'rotate(0deg)'
          this.rotateDeg = 0
          this.isDisPreBtn = false
          this.bigImgUrl = this.imgData[this.i].url
          this.imgIndex = this.i + 1
          this.bigImgName = this.imgData[this.i].name
          _this.normal()
          _this.init()
        }
      },
      // 切换到下一张
      handleNext () {
        let _this = this
        // 当前的索引加1
        this.i++
        // 如果索引等于列表的长度 提示已经到最后一页，当前索引值减去1， 否则的话 去下一张图的名称和url，以及第几张图
        if (this.i === this.imgData.length) {
          this.isDisNextBtn = true
          _this.i = Number(this.imgData.length) - 1
        } else {
          // 初始化旋转为0
          this.$refs.bigImg.style.transform = 'rotate(0deg)'
          this.rotateDeg = 0
          this.isDisNextBtn = false
          this.bigImgUrl = this.imgData[this.i].url
          this.imgIndex = this.i + 1
          this.bigImgName = this.imgData[this.i].name
          _this.normal()
          _this.init()
        }
      },
      // 关闭查看器
      closeViewer () {
        this.$emit('closeImgView')
      }
    }
  }
</script>

<style scoped>
  .imgName {
    width: 100%;
    height: 40px;
    background: rgba(0,0,0,0.2);
    color: #fff;
    line-height: 40px;
    z-index: 10000;
    position: fixed;
    right: 0px;
    left: 0px;
  }
  .imgName .left {
    float: left;
    padding-left: 20px;
    user-select: none;
  }
  .imgName .center {
    margin: 0 100px;
    text-align: center;
    font-weight: 500;
    padding: 14px;
    line-height: 12px;
  }
  .imgName .closeBtn {
    display: inline-block;
    width: 20px;
    height: 20px;
    float: right;
    padding-right: 20px;
    font-size: 0;
  }
  .imgName .closeBtn i {
    font-size: 20px!important;
  }
  .imgContainer .tips {
    background: rgba(0,0,0,0.7);
    color: #fff;
    text-align: center;
    line-height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -20px;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
  }
  .fixedHandle {
    width: 800px;
    height: 140px;
    position: fixed;
    left: 50%;
    bottom: 0;
    margin-left: -400px;
    font-size: 0;
    overflow: hidden;
    z-index: 100;
  }
  .handleContainer {
    width: 265px;
    height: 40px;
    background: rgba(0,0,0,0.6);
    line-height: 40px;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin-left: -100px;
  }
  ul {
    padding: 0;
    margin: 0;
  }
  ul li {
    list-style: none;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 20px;
    cursor: pointer;
    font-size: 0;
  }
  .iconfont {
    font-size: 28px;
    color: #fff;
  }
  .thumbnailContainer {
    max-width: 800px;
    background: rgba(0,0,0,0.2);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .thumbnailContainer ul {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 0;
    white-space: nowrap;
  }
  .thumbnailContainer ul li {
    display: inline-block;
    width: 38px;
    height: 38px;
    box-sizing: content-box;
    margin-left: 20px;
    user-select: none;
  }
  .thumbnailContainer ul li:last-child {
    margin-right: 20px;
  }
  .thumbnailContainer ul li img {
    display: inline-block;
    width: 38px;
    height: 38px;
    box-sizing: content-box;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.6s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .show-btn {
    color: #ccc;
    cursor: no-drop;
  }
  .cancelselect{
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }
  /* 添加border */
  .borderActive {
    border: solid 1px #fff;
  }
  /* 修改原生的滚动条 */
  ::-webkit-scrollbar { /* 血槽宽度 */
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb { /* 拖动条 */
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
  }
  ::-webkit-scrollbar-track { /* 背景槽 */
    background: #ddd;
    border-radius: 6px;
  }
</style>
